<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <style>
        img{
            width: 200px;
        }
    </style>
</head>
<body>
    <!-- 纯数据驱动框架，不用再去操作DOM -->
    <div id="app">
        <div v-for="item of res" :key="item.id">
            <img :src="item.coverImgUrl"/>
            <h4>{{item.name}}</h4>
        </div>
    </div>
    <script>
        new Vue({
            el:"#app", 
            data: {
                res:[]
            },
            mounted(){
                $.ajax({
                 url:"http://localhost:3000/top/playlist?cat=华语&limit=3",
                type:"get",
                dataType:"json",
                success : res=>{
                    this.res = res.playlists;
                }    
                }) 
            }            
        })   
    </script>
  
</body>
</html>